<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "0px"
    },
    ecdata: '',
    maxdata: ''
  },
  data() {
    return {
      color: ["#0050E2", "#FF5227", "#FF9200", "#0780ED", "#00AFC3"],
      chart: {}
    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {
      let that = this
      let opt = {

        color: ["#0780ED", "#FF5227", "#FF9200", "#0050E2", "#00AFC3",],
        // title: {
        //   text: 'Design Guidelines',
        //   subtext: 'Load case v.s. Material type'
        // },
        grid: {
          left: '40',
          // top: '16%',
          // width: '80%',

          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          // formatter: function (params) {
          //   if (params.value.length > 1) {
          //     return params.seriesName + ' :<br/>'
          //       + params.value[0] + 'rpm '
          //       + params.value[1] + 'kN ';
          //   }
          //   else {
          //     return params.seriesName //+ ' :<br/>'
          //     // + params.name + ' : '
          //     // + params.value + 'bar ';
          //   }
          // },
          formatter(p) {
            console.log(p)
            // var y_name = p[0].name
            // p.forEach((item, index) => {
            //   y_name += `<p>${item.marker}${item.seriesName}：${
            //     item.value.length > 1 ? item.value[1] : item.value
            //     } kW</p>`
            // })
            // return y_name
          },
          axisPointer: {
            show: true,
            type: 'cross',
            lineStyle: {
              type: 'solid',
              width: 1
            },
            // label: {
            //   fontSize: 12,
            //   formatter: function (params) {
            //     return params.value.toFixed(2);
            //   }
            // }
          }
        },
        legend: {
          // data: [
          //   { name: 'M1', icon: 'rect' },
          //   { name: 'M2', icon: 'rect' },
          //   { name: 'M3', icon: 'rect' },
          //   { name: 'M4', icon: 'rect' },
          //   { name: 'M5', icon: 'rect' },
          //   { name: '1000@230' },
          //   { name: '1300@230' },
          //   { name: '1000@210' },
          //   { name: '1300@210' },
          //   { name: '1800@230' },
          //   { name: '1800@210' },
          //   { name: '2600@50' },

          // ],
          //{name: ['1000@230', '1300@230','1000@210','1300@210', '1800@230','1800@210','2600@50']},
          // align: 'right',
          // orient: 'vertical',
          // right: 0,
          // top: '16%',
          textStyle: {
            fontSize: 13,
          },
        },
        label: {
          // show: true,
          // fontSize: 14,
          // position: 'right',
          // normal: {            formatter: function (params) {
          //     return params.seriesName;
          //   }          }
        },
        toolbox: {
          right: 20,
          top: 30,
          feature: {
            saveAsImage: {},
            restore: {},
            dataView: {},
            // dataZoom: {},
          }
        },

        // xAxis: [
        //   {
        //     name: 'speed (rpm)',
        //     nameLocation: 'middle',
        //     nameGap: 30,
        //     nameTextStyle: {
        //       fontSize: 16
        //     },
        //     // type: 'category',
        //     scale: true,
        //     // max: 2,
        //     min: 0,
        //     axisLabel: {
        //       fontSize: 18,
        //     },
        //     splitLine: {
        //       lineStyle: {
        //         type: 'dashed'
        //       }
        //     },
        //     data: this.origin.dataResp ? this.origin.dataResp.map((item, i) => {
        //       return item.time
        //     }) : null
        //   }
        // ],
        // yAxis: [
        //   {
        //     // name: 'Load (kN)',
        //     nameLocation: 'middle',
        //     nameGap: 60,
        //     nameTextStyle: {
        //       fontSize: 16
        //     },
        //     type: 'value',
        //     scale: true,
        //     max: 10000,
        //     min: 0,
        //     axisLabel: {
        //       fontSize: 18,
        //     },
        //     splitLine: {
        //       lineStyle: {
        //         type: 'dashed'
        //       }
        //     }
        //   }
        // ],
        yAxis: [
          {
            // 坐标轴名称。
            name: 'kW',
            // 坐标轴名称的文字样式。
            nameTextStyle: {
              padding: [0, 25, 28, 0]
            },
            // 坐标轴类型
            type: "value",
            // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
            scale: true,
            // 坐标轴在 grid 区域中的分隔线
            splitLine: {
              // 是否显示
              show: false,
              lineStyle: {
                color: "#e5e5e5",
                //分隔线的类型 可选'solid' 'dashed''dotted'
                type: "dotted"
              }
            },
            // 坐标轴轴线相关设置。
            axisLine: {
              // 是否显示
              // show: true,
              lineStyle: {
                // 坐标轴线线的颜色。
                // color: "#000000"
                // 坐标轴线线的宽度
                // width: 1
                width: 0
              }
            },

            // 坐标轴刻度相关设置
            axisTick: {
              // 是否显示坐标轴刻度
              show: false
            }
          }
        ],
        xAxis: {
          // 是否显示
          show: true,
          // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
          scale: true,
          // 坐标轴类型
          type: "category",
          // 坐标轴轴线相关设置
          axisLine: {
            // 坐标轴样式
            lineStyle: {
              // 坐标轴颜色
              // color: "#000000"
            }
          },
          // 坐标轴刻度相关设置
          axisTick: {
            // 是否显示坐标轴刻度
            show: false
          },

          // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
          // boundaryGap: false,
          // 坐标轴刻度标签的相关设置
          axisLabel: {
            // 坐标轴刻度颜色
            // color: "#000000"
          },
          data: this.origin.dataResp ? this.origin.dataResp.map((item, i) => {
            return item.time
          }) : null
        },
        dataZoom: [
          // 滑动条型数据区域缩放组件
          {
            show: true,
            type: "slider",
            // 滚动条高度
            height: 40,
            // 滚动条近距离底部距离
            bottom: 0,
            // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。默认0
            start: 0,
            // 数据窗口范围的结束百分比。范围是：0 ~ 100。默认100
            end: 100,
            // 手柄的样式配置
            handleStyle: {
              // 手柄颜色 默认#a7b7cc
              color: false
            },
            // 文字样式
            textStyle: {
              //  文字的颜色 默认#333
              color: false
            }
          },
          // 内置型数据区域缩放组件
          {
            type: "inside"
          }
        ],
        series: [

          //limits
          {
            name: '日最大需量',
            type: 'scatter',
            data: [],
            // lineStyle: { color: '#FF5227', width: '2' },
            markLine: {
              lineStyle: { type: 'solid' },
              data: [{ yAxis: that.maxdata, label: { formatter: '日最大需量' + that.maxdata } }]
            }
          },
          // data: [{ xAxis: 0.7, label: { formatter: 'a' } }, { yAxis: 6000 }]

          // { name: 'M2', type: 'scatter', data: that.dataLimits, markLine: that.limitM2 },
          // { name: 'M4', type: 'scatter', data: that.dataLimits, markLine: that.limitM4 },
          // { name: 'M5', type: 'scatter', data: that.dataLimits, markLine: that.limitM5 },
          // { name: 'M3', type: 'scatter', data: that.dataLimits, markLine: that.limitM3 },
          {
            name: '实时需量',
            symbolSize: 10,
            data: this.origin.dataResp ? this.origin.dataResp.map((item, i) => {
              return item.value
            }) : null,
            type: 'scatter',
            animation: false,
            markArea: {
              data: [[{
                name: '高峰值',
                xAxis: '2018-12-23 20:00:00'
              }, {
                xAxis: '2018-12-23 23:59:00'
              }]
              ]
            }

          },

        ],


      }
      return opt
    }
  },
  watch: {
    width() { },
    origin() {
      this.chart.setOption(this.opt, true)
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    window.removeEventListener("resize", () => {
      this.chart.resize()
    })
  },
  created() {
    this.r_color = this.rgba_color(this.color)
    this.dataLimits =
      [
        //[0, 0],
        //[2, 9800],        
      ];

    // limits define start
    this.limitM1 = {
      lineStyle: { type: 'solid' },
      // data: [{ xAxis: 0.7, label: { formatter: 'a' } }, { yAxis: 6000 }]
      data: [{ yAxis: this.maxdata }]
    };
    this.limitM2 = {
      lineStyle: { type: 'solid' },
      data: [{ yAxis: 8500 }]
    };
    this.limitM4 = {
      lineStyle: { type: 'solid' },
      data: [{ yAxis: 9000 }]
    };
    this.limitM5 = {
      lineStyle: { type: 'solid' },
      data: [{ yAxis: 9500 }]
    };
    this.limitM3 = {
      lineStyle: { type: 'solid' },
      data: [{ yAxis: 10000 }]
    };
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
      window.addEventListener("resize", () => {
        this.chart.resize()
      })
      // const sidebarElm = document.getElementsByClassName('leftMenu')[0]
      // sidebarElm.addEventListener('transitionend', () => {
      //   this.chart.resize()
      // })
    },
    rgba_color(color) {
      var color_arr = []
      for (let i = 0; i < color.length; i++) {
        let num = color[i].split("#")[1]
        color_arr.push({
          a: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.4)`,
          b: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.1)`
        })
      }
      return color_arr
    }
  }
}
</script>
